import React from 'react';
import { 
  Tag, 
  Card,
  ActivityIcon,
  TrendUpIcon,
  TrendDownIcon,
  BellIcon,
  DeviceDesktopIcon,
  DeviceDesktopBoltIcon,
  DeviceDesktopExclamationIcon,
  DeviceDesktopXIcon
} from "@repo/ui";
import type { DashboardStats } from "@repo/api";
import styles from './DashboardPage.module.css';

const DashboardPage: React.FC = () => {
  // 设备统计数据
  const stats: DashboardStats = {
    totalDevices: 24,
    onlineDevices: 18,
    offlineDevices: 4,
    errorDevices: 2,
    totalFirmware: 8,
    latestFirmware: "v2.1.3",
    dataUsage: 125.6,
    uptime: "99.8%"
  };


  // 设备趋势数据
  const deviceTrendData = [
    { name: '总设备数', value: stats.totalDevices, trend: 'up', trendValue: '+2 本月' },
    { name: '在线设备', value: stats.onlineDevices, trend: 'up', trendValue: `${((stats.onlineDevices / stats.totalDevices) * 100).toFixed(1)}%` },
    { name: '离线设备', value: stats.offlineDevices, trend: 'down', trendValue: `${((stats.offlineDevices / stats.totalDevices) * 100).toFixed(1)}%` },
    { name: '故障设备', value: stats.errorDevices, trend: 'stable', trendValue: `${((stats.errorDevices / stats.totalDevices) * 100).toFixed(1)}%` }
  ];

  // 平台公告数据
  const announcements = [
    {
      id: 1,
      title: 'ESP32固件v2.1.3发布',
      content: '新版本包含性能优化和bug修复，建议所有设备升级',
      time: '2025-01-15',
      type: 'update'
    },
    {
      id: 2,
      title: '系统维护通知',
      content: '系统将于本周六凌晨2:00-4:00进行维护升级',
      time: '2025-01-12',
      type: 'maintenance'
    },
    {
      id: 3,
      title: '新功能上线',
      content: '设备远程控制功能已正式上线，支持更多操作',
      time: '2025-01-10',
      type: 'feature'
    }
  ];

  const getTrendIcon = (trend: string) => {
    switch (trend) {
      case 'up':
        return <TrendUpIcon size={16} className="text-green-500" />;
      case 'down':
        return <TrendDownIcon size={16} className="text-red-500" />;
      default:
        return <ActivityIcon size={16} className="text-gray-500" />;
    }
  };

  const getPerformanceIcon = (name: string) => {
    switch (name) {
      case '总设备数':
        return <DeviceDesktopIcon size={20} />;
      case '在线设备':
        return <DeviceDesktopBoltIcon size={20} />;
      case '离线设备':
        return <DeviceDesktopExclamationIcon size={20} />;
      case '故障设备':
        return <DeviceDesktopXIcon size={20} />;
      default:
        return <ActivityIcon size={20} />;
    }
  };

  const handleAnnouncementClick = (announcementId: number) => {
    const announcement = announcements.find(a => a.id === announcementId);
    if (announcement) {
      console.log('查看公告详情:', announcement);
      // 这里可以添加路由跳转或打开详情弹窗的逻辑
      // 例如：navigate(`/announcements/${announcementId}`) 或打开详情弹窗
    }
  };

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <h1 className={styles.title}>ESP32 控制台</h1>
        <p className={styles.subtitle}>设备监控与管理看板</p>
      </div>

      {/* 主要统计卡片区域 */}
      <div className={styles.statsGrid}>
        <Card className={styles.statCard}>
          <div className={styles.statIcon} style={{ backgroundColor: '#3b82f6' }}>
            <DeviceDesktopIcon size={20} />
          </div>
          <div className={styles.statContent}>
            <div className={styles.statValue}>{stats.totalDevices}</div>
            <div className={styles.statLabel}>总设备数</div>
          </div>
        </Card>

        <Card className={styles.statCard}>
          <div className={styles.statIcon} style={{ backgroundColor: '#10b981' }}>
            <DeviceDesktopBoltIcon size={20} />
          </div>
          <div className={styles.statContent}>
            <div className={styles.statValue}>{stats.onlineDevices}</div>
            <div className={styles.statLabel}>在线设备</div>
          </div>
        </Card>

        <Card className={styles.statCard}>
          <div className={styles.statIcon} style={{ backgroundColor: '#6b7280' }}>
            <DeviceDesktopExclamationIcon size={20} />
          </div>
          <div className={styles.statContent}>
            <div className={styles.statValue}>{stats.offlineDevices}</div>
            <div className={styles.statLabel}>离线设备</div>
          </div>
        </Card>

        <Card className={styles.statCard}>
          <div className={styles.statIcon} style={{ backgroundColor: '#ef4444' }}>
            <DeviceDesktopXIcon size={20} />
          </div>
          <div className={styles.statContent}>
            <div className={styles.statValue}>{stats.errorDevices}</div>
            <div className={styles.statLabel}>故障设备</div>
          </div>
        </Card>
      </div>

      {/* 系统性能监控区域 */}
      <div className={styles.performanceGrid}>
        <Card className={styles.performanceCard}>
          <div className={styles.performanceHeader}>
            <h3 className={styles.performanceTitle}>设备趋势</h3>
            <ActivityIcon size={16} className="text-gray-500" />
          </div>
          <div className={styles.performanceList}>
            {deviceTrendData.map((item, index) => (
              <div key={index} className={styles.performanceItem}>
                <div className={styles.performanceIcon}>
                  {getPerformanceIcon(item.name)}
                </div>
                <div className={styles.performanceInfo}>
                  <div className={styles.performanceName}>{item.name}</div>
                  <div className={styles.performanceValue}>{item.value}</div>
                </div>
                <div className={styles.performanceTrend}>
                  {getTrendIcon(item.trend)}
                  <span className={styles.trendValue}>{item.trendValue}</span>
                </div>
              </div>
            ))}
          </div>
        </Card>

        <Card className={styles.performanceCard}>
          <div className={styles.performanceHeader}>
            <h3 className={styles.performanceTitle}>平台公告</h3>
            <BellIcon size={16} className="text-gray-500" />
          </div>
          <div className={styles.announcementsList}>
            {announcements.map((announcement) => (
              <div 
                key={announcement.id} 
                className={styles.announcementItem}
                onClick={() => handleAnnouncementClick(announcement.id)}
                role="button"
                tabIndex={0}
                onKeyDown={(e) => {
                  if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    handleAnnouncementClick(announcement.id);
                  }
                }}
                aria-label={`查看公告详情：${announcement.title}`}
              >
                <div className={styles.announcementHeader}>
                  <div className={styles.announcementType}>
                    <Tag 
                      variant={announcement.type === 'update' ? 'success' : announcement.type === 'maintenance' ? 'warning' : 'primary'} 
                      size="sm"
                    >
                      {announcement.type === 'update' ? '更新' : announcement.type === 'maintenance' ? '维护' : '功能'}
                    </Tag>
                  </div>
                  <div className={styles.announcementTime}>{announcement.time}</div>
                </div>
                <div className={styles.announcementTitle}>{announcement.title}</div>
                <div className={styles.announcementContent}>{announcement.content}</div>
              </div>
            ))}
          </div>
        </Card>
      </div>

    </div>
  );
};

export default DashboardPage;
